<template>
<div style="direction: ltr;">
  <div style="direction: rtl; height: 20px;"><a v-for="(item, i) in selectedCountries" :key="item.id" class="item" @click="swiper.slideTo(i)">{{ item.name.ug != "" ? item.name.ug : item.name.zh }}</a></div>
  <div style="height: 20px;"><a v-for="(item, i) in selectedCountries" :key="item.id" class="item" @click="swiper.slideTo(i)">{{ item.name.zh }}</a></div>
  <swiper :options="swiperOption" ref="MainSwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide v-for="item in Countries" :key="item.id" class="slider">
      <!-- <Input clerarable/> -->
        <span v-for="innerItem in item" :key="innerItem.id" @click="itemSelected(innerItem)">
          <span class="Item-Label Left-Start">{{innerItem.name.zh}}</span>
          <span class="Item-Label Right-Start">{{innerItem.name.ug}}</span>
        </span>
    </swiper-slide>
  </swiper>
</div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import { Country } from "../Entities/Country";

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

import { Api, MyHttpClient } from "../api";

function newHttpClient() {
  return new MyHttpClient();
}

const CHANGE = "onChange";
const DATA = "data";

export default {
  components: {
    swiper,
    swiperSlide
  },
  model: {
    event: CHANGE,
    prop: DATA
  },
  props: {
    data: {
      required: true,
      type: Object,
      validator: Country.isValid
    }
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    swiper(){
      return this.$refs.MainSwiper.swiper
    },
    currentIndex(){
      return this.swiper.activeIndex
    },
  },
  
  data() {
    return {
      swiperOption: {
        // autoplay: true,
        direction: "horizontal",
        speed: 300,
        nested: true,
        observerParents: true,
        // autoHeight: true
        // loop: true
        observer: true,
        on: {
          init: () => {
            // console.log("Initialization")
          }
        }
      },
      Countries: [
        
      ],
      selectedCountries: [

      ]
    };
  },
  methods: {
    async itemSelected(item){
      if (this.selectedCountries.length > item.layer){
        this.selectedCountries = this.selectedCountries.slice(0, item.layer)
      }
      this.selectedCountries.push(item)

      this.data = item
      this.$emit(CHANGE, this.data)

      let data = (await newHttpClient().get(Api.area.getChilds(item.id))).data
      if (data.length > 0){
        if (this.Countries.length > item.layer + 1){
          this.Countries = this.Countries.slice(0, item.layer + 1)
          this.selectedCountries = this.selectedCountries.slice(0, item.layer + 1)
        }
        await this.Countries.push(data)
        this.swiper.slideTo(item.layer + 1)
      }
      
      
    },
    next(){
      this.swiper.slideNext()
    }
  },
  async created() {
    try {
      let data = (await newHttpClient().get(Api.area.searchArea("", 0, 0, 100))).data;
      this.Countries.push(data)
      this.swiper.updateSlides()
    } catch (exception) {}
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/colors";
.slider {
  overflow: auto;
  // position: absolute;
  // top: 0px;
  // bottom: 0px;
  // right: 0px;
  // left: 0px;
}
.swiper-container {
  // background-color: orange;
  width: 100%;
  height: 90%;
}

.Item-Label {
  display: inline-block;
  width: 49%;
  padding: 5px;
}
.Right-Start {
  text-align: right;
}
.Left-Start {
  text-align: left;
}

.item {
  color: $color-primary;
  text-decoration: underline;
  margin: {
    right: 3px;
    left: 3px;
  }
}

</style>
